<template>
  <a-input-group compact>
    <a-select v-model="type" style="width: 130px" @change="handleTypeChange">
      <a-select-option value="alipay">支付宝</a-select-option>
      <a-select-option value="bank">银行账户</a-select-option>
    </a-select>
    <a-input
      style="width: calc(100% - 130px)"
      v-model="number"
      @change="handleNumberChange"
    ></a-input>
  </a-input-group>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    value: {
      type: Object
    }
  },
  data() {
    const {type, number} = this.value || {}
    return {
      type: type || 'alipay',
      number: number || ''
    }
  },
  methods: {
    handleTypeChange(val) {
      this.$emit('change', {...this.value, type: val})
    },
    handleNumberChange(e) {
      this.$emit('change', {...this.value, number : e.target.value})
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus"></style>
